<template>
	<view class="content1">
		<navbar @goBack="goBack" title="对战记录"></navbar>
		<view class="nav">
			<view class="txt" @click="tabChange('all')" :class="[activeTab=='all'?'select':'']">全部
			</view>
			<view class="txt" @click="tabChange('battle')" :class="[activeTab=='battle'?'select':'']">对战中
			</view>
			<view class="txt" @click="tabChange('dik')" :class="[activeTab=='dik'?'select':'']">对战中
			</view>
			<view class="txt" @click="tabChange('fail')" :class="[activeTab=='fail'?'select':'']">对战中
			</view>
		</view>
		<view class="package-box" style="padding-bottom: 90rpx" v-if="activeTab=='all'">
			<view v-for="(item, index) in List" :key="index" class="gift-box">
				<view class="" style="color: #a1a1a1; font-size: 24rpx">
					订单编号：{{ item.ono }}
				</view>
				<view class="image-box" @click="selectitem(item, index)">
					<view class="limg">
						<van-image width="100%" height="100%" :src="item.main_photo"></van-image>
					</view>
					<view style="padding-right: 160rpx; flex: 1">
						<view class="white-content title">{{ item.game_name }}</view>
						<view class="white-content price" style="color: #a1a1a1">{{ item.gift_name }}</view>
					</view>
					<view class="statusimg" v-if="item.outcome == '失败'">
						<image src="/static/owo/fail.png" mode="widthFix"></image>
					</view>
					<view class="statusimg" v-else-if="item.outcome == '胜利'">
						<image src="/static/owo/success.png" mode="widthFix"></image>
					</view>
					<view class="duizhan" v-else>
						<view class="duilabel">
							对战中
						</view>
						<!-- <view class="cancelduilabel">
							取消对战
						</view> -->
					</view>
				</view>
				<view
					style="display: flex;flex-direction: row;justify-content: space-between;color: #a1a1a1; font-size: 24rpx;padding: 40rpx 0 10rpx;">
					<text>创建时间：</text>
					<text>{{convertDateTime(item.updated_at) }}</text>
				</view>
				<view
					style="display: flex;flex-direction: row;justify-content: space-between;color: #a1a1a1; font-size: 24rpx;padding: 10rpx 0;">
					<text>消费金额：</text>
					<text>¥ {{ item.price }}</text>
				</view>
			</view>
		</view>
		<view class="package-box" style="padding-bottom: 90rpx" v-if="activeTab=='battle'">
			<view v-for="(item, index) in List" :key="index" class="gift-box">
				<view class="" style="color: #a1a1a1; font-size: 24rpx">
					订单编号：{{ item.ono }}
				</view>
				<view class="image-box" @click="selectitem(item, index)">
					<view class="limg">
						<van-image width="100%" height="100%" :src="item.main_photo"></van-image>
					</view>
					<view style="padding-right: 160rpx; flex: 1">
						<view class="white-content title">{{ item.game_name }}</view>
						<view class="white-content price" style="color: #a1a1a1">{{ item.gift_name }}</view>
					</view>
					<view class="duizhan">
						<view class="duilabel">
							对战中
						</view>
						<!-- <view class="cancelduilabel">
									取消对战
								</view> -->
					</view>
				</view>
				<view
					style="display: flex;flex-direction: row;justify-content: space-between;color: #a1a1a1; font-size: 24rpx;padding: 40rpx 0 10rpx;">
					<text>创建时间：</text>
					<text>{{convertDateTime(item.updated_at) }}</text>
				</view>
				<view
					style="display: flex;flex-direction: row;justify-content: space-between;color: #a1a1a1; font-size: 24rpx;padding: 10rpx 0;">
					<text>消费金额：</text>
					<text>333</text>
				</view>
			</view>
		</view>

		<view class="package-box" style="padding-bottom: 90rpx" v-if="activeTab=='dik'">
			<view v-for="(item, index) in List" :key="index" class="gift-box">
				<view class="" style="color: #a1a1a1; font-size: 24rpx">
					订单编号：{{ item.ono }}
				</view>
				<view class="image-box" @click="selectitem(item, index)">
					<view class="limg">
						<van-image width="100%" height="100%" :src="item.main_photo"></van-image>
					</view>
					<view style="padding-right: 160rpx; flex: 1">
						<view class="white-content title">{{ item.game_name }}</view>
						<view class="white-content price" style="color: #a1a1a1">{{ item.gift_name }}</view>
					</view>
					<view class="statusimg">
						<image src="/static/owo/success.png" mode="widthFix"></image>
					</view>
					<!-- <view class="duizhan">
		  						<view class="duilabel">
		  							对战
		  						</view>
		  						<view class="cancelduilabel">
		  							取消对战
		  						</view>
		  					</view> -->
				</view>
				<view
					style="display: flex;flex-direction: row;justify-content: space-between;color: #a1a1a1; font-size: 24rpx;padding: 40rpx 0 10rpx;">
					<text>创建时间：</text>
					<text>{{convertDateTime(item.updated_at) }}</text>
				</view>
				<view
					style="display: flex;flex-direction: row;justify-content: space-between;color: #a1a1a1; font-size: 24rpx;padding: 10rpx 0;">
					<text>消费金额：</text>
					<text>333</text>
				</view>
			</view>
		</view>
		<view class="package-box" style="padding-bottom: 90rpx" v-if="activeTab=='fail'">
			<view v-for="(item, index) in List" :key="index" class="gift-box">
				<view class="" style="color: #a1a1a1; font-size: 24rpx">
					订单编号：{{ item.ono }}
				</view>
				<view class="image-box" @click="selectitem(item, index)">
					<view class="limg">
						<van-image width="100%" height="100%" :src="item.main_photo"></van-image>
					</view>
					<view style="padding-right: 160rpx; flex: 1">
						<view class="white-content title">{{ item.game_name }}</view>
						<view class="white-content price" style="color: #a1a1a1">{{ item.gift_name }}</view>
					</view>
					<view class="statusimg">
						<image src="/static/owo/fail.png" mode="widthFix"></image>
					</view>

				</view>
				<view
					style="display: flex;flex-direction: row;justify-content: space-between;color: #a1a1a1; font-size: 24rpx;padding: 40rpx 0 10rpx;">
					<text>创建时间：</text>
					<text>{{convertDateTime(item.updated_at) }}</text>
				</view>
				<view
					style="display: flex;flex-direction: row;justify-content: space-between;color: #a1a1a1; font-size: 24rpx;padding: 10rpx 0;">
					<text>消费金额：</text>
					<text>333</text>
				</view>
			</view>
		</view>
		<view class="empty-page">
			<view class="nofull">
				<image src="/static/owo/nofull.png" class="nofullimg"></image>
				<text class="notitle">暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from "moment";
	import {
		pkrecordlist
	} from "@/api/user";
	import navbar from '@/wxcomponents/navbar'
	export default {
		components: {
			navbar
		},
		data() {
			return {
				activeTab: "all",
				List: [],
				Tab: "",
				page: 1,
				total: 0
			};
		},
		onLoad: function(options) {
			this.pkrecordlist();
		},
		onReachBottom() {
			if (this.List.length < this.total) {
				++this.page
				this.pkrecordlist();
			}
		},
		async onPullDownRefresh() {
			this.page = 1
			await this.pkrecordlist();
			uni.stopPullDownRefresh()
		},
		methods: {
			convertDateTime(iosDate) {
				if (!iosDate) {
					return "-";
				}
				const date = new Date(iosDate);
				const year = date.getFullYear();
				const month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
				const day = ("0" + date.getDate()).slice(-2);
				const hours = ("0" + date.getHours()).slice(-2);
				const minutes = ("0" + date.getMinutes()).slice(-2);
				const seconds = ("0" + date.getSeconds()).slice(-2);

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 未申请
			async pkrecordlist() {
				var obj = {
					outcome: this.Tab,
					page: this.page,
					size: 10
				};
				const res = await pkrecordlist(obj);
				const data = res.data || {};
				const items = data.items || [];

				for (let i = 0; i < items.length; i++) {
					items[i]['price'] = (items[i]['price'] / 100).toFixed(2)
				}

				if (this.page == 1) {
					this.List = items;
				} else {
					this.List = this.List.concat(items);
				}
				this.total = data.total
			},
			// tab切换
			async tabChange(tabName) {
				if (tabName === "all") {
					this.Tab = "";
				} else if (tabName === "battle") {
					this.Tab = "进行中";
				} else if (tabName === "fail") {
					this.Tab = "失败";
				} else {
					this.Tab = "胜利";
				}
				this.page = 1
				this.activeTab = tabName
				this.pkrecordlist();
			},
		},
	};
</script>

<style lang="scss">
	@import "src/static/scss/common";

	.nav {
		display: flex;
		justify-content: space-around;
		// width: 490rpx;
		margin-top: 20rpx;

		.txt {
			display: inline-block;
			width: 132rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			position: relative;
			color: #ffffff;
			font-size: 28rpx;
		}

		.select {
			background-image: url("/static/owo/navselect.png");
			background-position: 0 0;
			background-repeat: no-repeat;
			background-size: 100%;
			color: #FFDD86;
		}
	}

	.package-box {
		// background-color: #0a050b;
	}

	.gift-box {
		display: flex;
		flex-direction: column;
		padding: 24rpx;
		// background-color: #2e2e2e;
		margin: 24rpx;
		border-radius: 12rpx;

		.image-box {
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;
			align-items: center;
			position: relative;

			.limg {
				margin-right: 20rpx;
				width: 172rpx;
				height: 172rpx;
			}

			.title {
				font-size: 28rpx;
			}

			.price {
				font-size: 24rpx;
				margin-top: 10rpx;
			}

			.statusimg {
				width: 146rpx;
				height: 164rpx;
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
				display: flex;
				align-items: flex-end;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.duizhan {
				display: flex;
				flex-direction: column;
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
				align-items: flex-end;

				.duilabel {
					border-radius: 24rpx;
					border: solid 1px #2a82e4;
					color: #2a82e4;
					text-align: center;
					width: 82rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 22rpx;
				}

				.cancelduilabel {
					// width:148rpx;
					border-radius: 26rpx;
					text-align: center;
					color: #f2f2f2;
					font-size: 22rpx;
					border: solid 1px #f2f2f2;
					padding: 10rpx 30rpx 10rpx 30rpx;
					margin-top: 20rpx;
				}
			}
		}
	}

	.app-container {
		flex-direction: column;
	}

	/* 标签栏样式 */
	.menu-tabs .van-tab--active {
		color: #ffffff;
		/* 字体颜色 */
		// background-color: #ff8917;
		/* 标签背景颜色 */
		border-radius: 40px;
		/* 圆角标签背景 */
	}

	.menu-tabs {
		.van-tabs__line {
			// background-color: #ff55ff;
			/* 线条颜色 */
			width: 40px;
			/*宽度 */
			// height: 10px;
			/* 高度 */
			border-radius: 40px;
			/* 圆角 */
		}

		// --tabs-nav-background-color: rgba(10, 5, 11, 1);
	}
</style>